<script setup lang="ts">
import { nextTick, provide, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute()
let keyVal = ref<number>(0)
// 监听，重载组件productCate
watch(() => route.query.parentId, () => {
  keyVal.value++
})
// const updateKeyFn = () => {
//   keyVal.value++
// }

// 局部组件刷新
// const isRouterAlive = ref(true);
const reload = () => {
  // // 删除组件
  // isRouterAlive.value = false;
  // nextTick(() => {
  //   // 重新渲染组件
  //   isRouterAlive.value = true;
  // });
  keyVal.value++
};
provide("reload", reload);

</script>

<template>
  <div style="overflow:hidden">
    <RouterView :key="keyVal"></RouterView>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
